<template>
  <div>
    <div >
      <el-input
        type="textarea"
        :rows="4"
        placeholder="请输入问题"
        maxlength="100"
          show-word-limit
        v-model="textarea"
      ></el-input>
      <div class="commit"  flex="main:justify cross:top"> 
          <uploadImageList ref="upload"></uploadImageList>
      <el-button type="primary" @click="askqaCommit">提问</el-button>
      </div>
       
      <div style="clear:both"></div>
    </div>
    <qaItem v-for="(item,index) in QAList" :QAItem="item" :key="index"></qaItem>
    <el-pagination
      class="pagination"
      @current-change="getQAList"
      :page-size="pageSize"
      hide-on-single-page
      layout="prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script lang="ts" >
import qaItem from "/@/components/qaitem.vue";
import uploadImageList from "/@/components/uploadImageList.vue";
//commitQuest , lessonQuest  
import { askqa, myqa } from "/@/api/qaApi";
export default {
  components: {
    qaItem,
    uploadImageList
  },
  props: {
      courseId:String,
      lessonId:String,
  },
  data(){
      return {
          dialogVisible:false,
          textarea:"",
          total:0,
          pageSize:20,
          QAList: []
      }
  },
  mounted(){
      this.getQAList()
  },
  methods: {
      askqaCommit() {
          if(!this.textarea)return
          const uploadImages = this.$refs.upload.uploadImgList.map(url=>url.ossFilePath);
          askqa({courseId:this.courseId,content:this.textarea,imageUrls:uploadImages}) // 提问
          .then(()=>{
              this.getQAList()
          }).catch(()=>{})
      },
     getQAList(page = 1, params = {}) {

      let offset = (page - 1) * this.pageSize;
      myqa({
        offset: offset,
        size: this.pageSize,
        lessonId: this.lessonId,
         courseId: this.courseId,
        ...params,
      })
      .then((res) => {
        const {questionInfos,total} = res;
        this.QAList = questionInfos
        this.total = total
      })
      .catch((err) => {console.error(err)});
    }
  }
};
</script>

<style lang="scss" scoped>
.upload{
    width: 50px;
    height: 50px;
}
.commit{

    margin-top: 10px;
}
</style>